<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.theScreen{
				color: red;
			}
			.div1{
				width: 400px;
				height: 300px;
				border: 3px solid red;
			}
			.div2{
				width: 350px;
				height: 250px;
				border: 3px solid aqua;
				margin-top:23px ;
				margin-left: 23px;
			}
			.div3{
				width: 300px;
				height: 200px;
				border: 3px solid goldenrod;
				margin-top:23px ;
				margin-left: 23px;
			}
			#content{
				margin-left: 32%;
				line-height: 200px;
				font-size: 25px;
				color: black;
			}
		</style>
	</head>
		
	<body>
		<div class="theScreen">
			<div id="whatDay">今天是星期3</div>
			<button onclick="kickMe()"style="color: aqua;background-color: yellow;border: none;margin-top: 15px;">点击切换显示</button>
		</div>
		<br />
		<br />
		******************************************************************************************************************
		<br />
		块标签：h1~h6、ul 、li、ol 、dl 、dt、dd、p、div、form、等
		<br />
		行标签：a、span strong 等
		<br />
		非行非块：img、input、table
		<br />
		<br />
		<br />
		<span style="font-size: 30px;">盒模型示意图：</span>
		<br />
		<br />
		<span style="color: blue;margin-left: 150px;">margin-top</span>
		<div class="div1">
		<span style="color: green;position: relative;left: 145px;">border-top</span>
			<div class="div2">
				<span style="color: darkgray;position: relative;left: 115px;">padding-top</span>
				<div class="div3">
					<span id="content">
						content
					</span>
				</div>
			</div>
		</div>
		****************************************************************************
		<br />
		<p><span style="color: red;">CSS选择符：</span>类选择符；ID选择符；包含(派生)选择符；通配选择符；选择符分组；标签指定式选择符；后代选择器；组合选择器等
				标签指定式选择符
		
		</p>
		<p><span style="color: red;">可继承的属性与优先级：</span>Class 可继承；伪类A标签可以继承；列表 UL LI DL DD DT 可继承；优先级就近原则，样式定义最近者为准；important比内连优先级高</p>
		<p><span style="color: red;">清除浮动的方式与优缺点：</span>1、父级div定义height；优点：简单，代码少，容易掌握；缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
		<br />
		2、结尾处加空div标签clear:both；优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
<br />
		3、父级div定义伪类:after和zoom；优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
<br />
		4、父级div定义overflow:hidden；优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
<br />
		5、父级div定义overflow:auto；优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
<br />
		6、父级div也一起浮动；优点：没有优点
缺点：会产生新的浮动问题。
<br />
		7、父级div定义display:table；优点：没有优点
缺点：会产生新的未知问题
<br />
		8、结尾处加br标签clear:both；只做了解就好；
		</p>
		<br />
		<br />
		<br />
		****************************************************************
		<p style="color: red;">html 几种储存方法
			<p>1.本地储存 localstorage;</p>
			<p>2.本地储存 sessionstorage;</p>
			<p>3.离线缓存 application cache;</p>
			<p>4. Web SQL;</p>
			<p>5.indexDB;</p>
		</p>
		<br />
		<br />
		<br />
		*****************************************************************
		<br />
		成功2××          成功处理了请求的状态码。 <br />
				200                   服务器已成功处理了请求并提供了请求的网页。 <br />
				204                   服务器成功处理了请求，但没有返回任何内容。    <br />     
				301                  请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎索引中保存新的URL。 <br />
				302                   请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。 <br />
				304                   如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可节省带宽和开销。 <br />
				400                    服务器不理解请求的语法。 <br />
				403                    服务器拒绝请求。 <br />
				404                    服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。 <br />
				服务器错误5××   表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。 <br />
				500                     服务器遇到错误，无法完成请求。 <br />
				503                     服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
		<script type="text/javascript">
			var whatDay= document.getElementById("whatDay");
			var dateIndex = 0;
			if(getCookie("showIndex")) {
				dayIndex = parseInt(getCookie("showIndex"));
				changeWay(dayIndex);
				dayIndex++;
			} else {
				changeDate(dayIndex);
			}
			function kickMe() {
				if(dayIndex > 2) {
					dayIndex = 0;
				}
				changeWay(dayIndex);
				dayIndex++;
			}
			function changeWay(thx) {
				var nowDate = new Date();
				var nowMonth = nowDate.getMonth() + 1;
				var nowDay = nowDate.getDate();
				var nowWeek = nowDate.getDay();
				if(thx == 0) {
					whatDay.innerHTML = "这个月是" + nowMonth + "月";
					saveCookie("showIndex", thx, 5);
				} else if(thx == 1) {
					whatDay.innerHTML = "今天是" + nowDay + "日";
					saveCookie("showIndex", thx, 5);
				} else if(thx== 2) {
					whatDay.innerHTML = "这周是第" + nowWeek +"周";
					saveCookie("showIndex", thx, 5);
				}
			}
			function getCookie(con) {
				var cookies = document.cookie;
				var arr = cookies.split("; ");
				for(var i = 0; i < arr.length; i++) {
					var arr2 = arr[i].split("=");
					if(arr2[0] == con) {
						return arr2[1];
					}
				}
				return false;
			}

			function saveCookie(name, value, day) {
				var date1 = new Date();
				date1.setDate(date1.getDate() + day);
				var str = name + "=" + value + ";expires=" + date1;
				document.cookie = str;
			}
			//移除
			function removeCookie(con) {
				saveCookie(con, "", -1);
			}
		</script>
	</body>

</html>